<template>
	<view :class="config.style">
		<!-- 未登录提示信息 -->
		<uni-popup id="dialogInput" ref="dialogLogin" type="center" @change="change">
			<view class="login-popup" >
				<view class="title">
					您还没有登录
				</view>
				<view class="description">
					请登录后进行操作
				</view>
				<view class="login-btn">
					<button type="default" class="button" hover-class="hover" @getUserInfo="login" @click="login">立即登录</button>
				</view>
				<view class="cancel-btn">
					<button @click="cancelLogin()">暂不登录</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'Login',
		props: {
			config: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		methods: {
			
			/**
			 * 打开输入popup提交信息
			 */
			loginDialog: function(){
				this.$refs.dialogLogin.open()
			},
			/**
			 * 执行登录操作
			 */
			login: function(e){
				//console.log(e)
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				let wxInfo = userInfo.hasOwnProperty('wxInfo') ? userInfo.wxInfo : {}
				this.util.login(function(res){
					//console.log(res)
					that.getUserInfo()
					that.$refs.dialogLogin.close()
				},'muu_classroom');
			},
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo.sessionid) {
					// 执行父级
					this.$emit('getUserInfo')
				}
			},
			
			/**
			 * 关闭弹出框
			 */
			cancelLogin: function(){
				this.$refs.dialogLogin.close()
			},
			change: function(){
				
			}
		}
	}
</script>

<style lang="scss">
	.login-popup {
		background-color: #fff;
		padding: 60rpx;
		border-radius: 20rpx;
		width: 440rpx;
		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
		}
		.description {
			text-align: center;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 60rpx;
		}
		.login-btn {
			margin-bottom: 20rpx;
			button {
				
			}
		}
		.cancel-btn {
			
		}
	}
	.Blue {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Blue;
				}
				.hover {
					background-color: $Blue-hover;
				}
			}
		}
	}
	.Green {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Green;
				}
				.hover {
					background-color: $Green-hover;
				}
			}
		}
	}
	.LightRed {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $LightRed;
				}
				.hover {
					background-color: $LightRed-hover;
				}
			}
		}
	}
	.Orange {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Orange;
				}
				.hover {
					background-color: $Orange-hover;
				}
			}
		}
	}
	.LightPink {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $LightPink;
				}
				.hover {
					background-color: $LightPink-hover;
				}
			}
		}
	}
	.Magenta {
		.login-popup {
			.login-btn {
				.button {
					color: #fff;
					background-color: $Magenta;
				}
				.hover {
					background-color: $Magenta-hover;
				}
			}
		}
	}
</style>
